<template>
	<view class="cardListBox">
		<view>
			<view class="cardsList" v-if="cardsList && cardsList.length != 0" v-for="(item, index) in cardsList" :key="index"
				@click="toCouponDetail(index,item.notApplyStatus)">
				<view class="cardsItem"
					:style="{ 'backgroundImage': 'url(' + `${item.notApplyStatus === 1?card1_icon:card2_icon}` + ')' }">
					<view class="top">
						<view class="left">
							<view style="width: 280rpx;height: 42rpx;font-size: 34rpx;color: #4b2312;">
								{{item.type == 1? "电量卡": item.type == 2? "折扣卡": item.type == 3? "金额卡": "次数卡"}}
							</view>
							<view>{{ item.restrictStr }} |
								{{ item.applyStationType == 1?'所有站点':item.applyStationType==2?'指定站点':'指定条件' }}
							</view>
						</view>
						<view class="right" v-if="item.type!=2">
							<view>{{ item.availableDegrees }}</view>
							<view>/{{ item.amount }}{{ item.type == 1?'度':item.type == 4?'次':'' }}</view>
						</view>
						<view class="right" v-if="item.type==2">
							<view>{{ item.amount}}</view>
							<view>折</view>
						</view>
					</view>
					<view>
						有效期：
						<text>{{ item.fixedStartTime }}</text>至<text>{{ item.fixedEndTime }}</text>
					</view>
					<view class=''>
						<image v-if='index===tabIndex' :src='base_url+"/group1/image/对号6255631624553423637.png"'
							style='width: 20rpx;height: 20rpx;'></image>
					</view>
				</view>
				<view class="statusDesc" v-if="item.notApplyStatus==2">
					<image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/orderSub/images/tip1.png" class="img">
					</image>
					<view class="desc">
						<text>不可用原因：</text>
						{{ item.notApplyCause }}
					</view>
				</view>
			</view>
			<view v-else>
				<Upgrading text="暂无数据"></Upgrading>
			</view>
			<view class='qeryst' @tap='getCouponLists'>确定</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyCouponPage
	} from "@/api/https";
	import {
		getStationCoupon,
		getStationDiscount,
		getTerminalDiscount
	} from '../../../../api/marketing/stationListApi';
	import {
		getpowerCardSelectionList
	} from './../../../../api/marketing/rechargeApi.js';
	import Upgrading from "@/components/upgrading/upgrading";
	var app = getApp();

	import {
		getPageCoupon,
		getUserCouponLists,
		getCardList,
		getCouponCenterLists,
		getEquityList,
	} from "@/api/marketing/coupon";
	export default {
		components: {
			Upgrading,
		},
		data() {
			return {
				defaultColor: uni.getStorageSync("defaultColor_Green"),
				ticket_bg: app.globalData.imgUrl + "/group1/operateSchemeImage/image/line_bg.png",
				card1_icon: app.globalData.imgUrl + "/group1/operateSchemeImage/image/card1_icon.png",
				// card2_icon: app.globalData.imgUrl + "/group1/operateSchemeImage/image/card2_icon.png",
				card2_icon: 'http://8.134.96.187:7110/group1/image/bg3399643139773774895.png',
				quanyi1_icon: app.globalData.imgUrl + "/group1/operateSchemeImage/image/quanyi1.png",
				duihuanma1_icon: app.globalData.imgUrl + "/group1/operateSchemeImage/image/duihuanma1.png",
				tabIndex: "",
				cardsList: [],
				base_url: app.globalData.imgUrl,
				stationId: 0,
			};
		},
		onLoad(options) {
			this.stationId = options.stationId
			this.getCardsList();
			this.tabIndex = uni.getStorageSync('ElectricityTabIndex') ? uni.getStorageSync('ElectricityTabIndex') : ''
			console.log(this.tabIndex)
		},
		methods: {
			getCardsList() {
				getpowerCardSelectionList(this.stationId).then((res) => {
					// console.log("获取充电卡列表============================》", res);
					if (res.code == 200) {
						console.log(res.data, 'res.data')
						let filter1 = res.data.filter(i => i.notApplyStatus === 1)
						let filter2 = res.data.filter(i => i.notApplyStatus === 2)
						this.cardsList = [...filter1, ...filter2] || [];
					}
				});
			},
			toCouponDetail(index, notApplyStatus) {
				if (notApplyStatus === 2) {
					return
				}
				if (index != this.tabIndex) {
					this.tabIndex = index
				} else {
					this.tabIndex = ''
				}
			},
			getCouponLists() {
				if (this.tabIndex != '' || this.tabIndex == 0) {
					uni.setStorageSync('ElectricityId', this.cardsList[this.tabIndex].id)
					uni.setStorageSync('ElectricityTabIndex', this.tabIndex)
					uni.navigateBack()
				} else {
					uni.showToast({
						title: '请选择要使用的电量卡',
						icon: 'none'
					})
				}

			},
		},
	};
</script>

<style lang="less" scoped>
	@import "../../../../commin/commin.less";

	.statusDesc {
		display: flex;
		margin-bottom: 16rpx;
	}

	.statusDesc .img {
		width: 32rpx;
		height: 32rpx;
		margin: 0 10rpx 0 12rpx;
	}

	.statusDesc .desc {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #303133;
	}

	.statusDesc .desc text {
		color: #fc724c;
	}

	page {
		background-color: #f5f7fa;
		padding-bottom: 120rpx;
	}

	.cardListBox {
		width: 100%;
		min-height: 100vh;
		background: #f5f7fa;
	}

	.tabNav {
		width: 100%;
		height: 90rpx;
		background: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;

		.tabItem {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #909399;
		}
	}

	.ticketList,
	.cardsList,
	.quanyisList,
	.redemptionCodesList {
		width: 94%;
		margin: 0rpx auto;

		.ticketItem {
			width: 100%;
			height: 246rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			background-size: 108% 120%;
			background-repeat: no-repeat;
			background-position: center;
			margin: 20rpx auto;

			.left {
				width: 230rpx;
				height: 246rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				>view:nth-of-type(1) {
					font-size: 34rpx;
					font-weight: 400;
					color: #ffffff;
				}

				>view:nth-of-type(2) {
					margin: 10rpx auto;
					font-size: 30rpx;
					font-weight: 400;
					color: #ffffff;
				}

				>view:nth-of-type(3) {
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
				}
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				padding: 32rpx;
				box-sizing: border-box;

				>view:nth-of-type(1) {
					width: 100%;
					font-size: 34rpx;
					font-weight: 400;
					color: #303133;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}

				>view:nth-of-type(2) {
					width: 100%;
					margin: 20rpx 0;
					font-size: 26rpx;
					font-weight: 400;
					color: #606266;
				}

				>view:nth-of-type(3) {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					font-size: 24rpx;
					font-weight: 400;
					color: #909399;

					>view {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						>view:nth-of-type(1) {
							width: 24rpx;
							height: 24rpx;
							border-radius: 50%;
							border: 1rpx solid #909399;
							color: #909399;
							font-size: 20rpx;
							text-align: center;
							line-height: 24rpx;
						}

						>view:nth-of-type(2) {
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.bottom_button {
		width: 100%;
		height: 102rpx;
		background: #ffffff;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;

		>view {
			width: 50%;
			height: 100%;
			line-height: 102rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: 400;
			color: #303133;
		}

		>view:nth-of-type(1) {
			border-right: 1rpx solid #dcdfe6;
		}
	}

	.cardsItem {
		width: 100%;
		margin: 20rpx auto;
		background-size: 110% 130%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 40rpx;
		box-sizing: border-box;
		overflow: hidden;
		border-radius: 20rpx;
		position: relative;

		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			color: #4b2312;

			.left {
				>view:nth-of-type(1) {
					font-size: 34rpx;
					font-weight: 400;
					color: #4b2312;
				}

				>view:nth-of-type(2) {
					margin-top: 20rpx;
					font-size: 22rpx;
					width: 280rpx;
					height: 42rpx;
					text-align: left;
					line-height: 42rpx;
					color: rgba(94, 50, 30, 0.8);
					border-radius: 21rpx;
				}
			}

			.right {
				width: 300rpx;
				height: 80rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: flex-end;

				>view {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: flex-end;
				}

				>view:nth-of-type(1) {
					height: 80rpx;
					font-size: 48rpx;
					font-weight: bold;
				}

				>view:nth-of-type(2) {
					height: 80rpx;
					font-size: 32rpx;
				}
			}
		}

		>view:nth-of-type(2) {
			width: 100%;
			margin-top: 16rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #5e321e;
		}

		>view:nth-of-type(3) {
			width: 26rpx;
			height: 26rpx;
			border-radius: 50%;
			border: 2rpx solid #fff;
			position: absolute;
			right: 32rpx;
			bottom: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.quanyiItem {
		width: 100%;
		height: 246rpx;
		margin: 20rpx auto;
		padding: 40rpx;
		box-sizing: border-box;
		background-size: 100% 102%;
		background-repeat: no-repeat;
		background-position: center;

		>view:nth-of-type(1) {
			font-size: 34rpx;
			font-weight: 400;
			line-height: 34rpx;
			color: rgba(212, 186, 162, 1);
		}

		>view:nth-of-type(2) {
			font-size: 26rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 26rpx;
			margin-top: 30rpx;
		}

		>view:nth-of-type(3) {
			margin-top: 50rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 24rpx;
		}
	}

	.redemptionCodeItem {
		width: 100%;
		height: 246rpx;
		margin: 20rpx auto;
		padding: 40rpx;
		box-sizing: border-box;
		background-size: 100% 102%;
		background-repeat: no-repeat;
		background-position: center;

		>view:nth-of-type(1) {
			font-size: 34rpx;
			font-weight: 400;
			color: #af5239;
		}

		>view:nth-of-type(2) {
			font-size: 26rpx;
			font-weight: 400;
			color: #af5239;
			margin-top: 30rpx;
		}

		>view:nth-of-type(3) {
			margin-top: 50rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #af5239;
		}
	}

	.qeryst {
		width: 686rpx;
		height: 88rpx;
		background: #6DB12E;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		position: fixed;
		left: 50%;
		margin-left: -343rpx;
		bottom: 20rpx;
	}
</style>